<template>
  <!-- <div>
    <todo-title
        innerText="This is my TodoList!"
    />
    <todo-input
        placeholder="Plase input"
        @add-todo="addTodo"
    />
    <todos
        :data="tdData"
        @change-checkbox="changeCheckbox"
        @remove-todo="removeTodo"
    />
  </div> -->
<div>
    <todo-title 
        innerText="This is my TodoList!" 
    />
    <todo-input 
        placeholder="Plase input" 
        @dispatch="dispatch" 
    />
    <todos 
        :data="tdData" 
        @dispatch="dispatch"  />
</div>
</template>

<script>
import TodoTitle from './Title.vue';
import TodoInput from './Input.vue';
import Todos from './Todos.vue';

// 导入派发器
import dispatch from '../../dispatchers/todoList.js';

export default {
    name: 'TodoList',
    components: {
        TodoTitle,
        TodoInput,
        Todos
    },
    data() {
        return {
            tdData: []
        }
    },
    methods: {
        // addTodo(obj) {
        //     this.tdData.push(obj);
        // },
        // changeCheckbox(id) {
        //     this.tdData = this.tdData.map(item => {
        //         if (item.id == id) {  
        //             item.completed = !item.completed;
        //         }

        //         return item;
        //     })
        // },
        // removeTodo(id) {
        //     this.tdData = this.tdData.filter(item => item.id != id);
        // }
        dispatch(...args) {
            dispatch(this)(...args);
        }
    }
}
</script>

<style>

</style>
